<template>
  <div class="purchase-order-wrap">
    <!-- 地址管理 -->
    <div class="order-con">
      <div class="item-block address" @click="handleClickOpenAddress">
        <div class="left"></div>
        <div class="right" v-if="address">
          <div class="addr" v-html="address.addr"></div>
          <div class="name" v-html="address.name"></div>
        </div>
        <div class="right" v-else>请填写收货地址</div>
        <svg-icon icon-class="icon_right" class="all-class-icon"></svg-icon>
        <div class="s1-borderB"></div>
      </div>
      <address-dialog :visible.sync="addressVisible" @selectAddress="selectAddress"></address-dialog>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      finished-text=""
      @load="onLoad"
    >
      <purchase-list :purchaseList="purchaseList" :choose='choose' :type="item.type" :bondList="bondList" @changeNumList="changeNumList" @changeTotal="changeTotal"></purchase-list>
    </van-list>
    <div class="total">
      <div class="cumulative-price">累计价格：<span v-html="scaleGoodsPriceFn(totalPrice, 'package')"></span></div>
      <div class="submit" @click="onSubmit()">提交</div>

    </div>
    <!-- 等级选择 -->
    <van-popup  v-if="item.type == 1" v-model="show" z-index="2005" position="bottom" >
      {{purchaseList.upgrade_level}}
      <div class="dhs-pop">
        <template v-for="level in upgrade_level">
          <div v-if="level.dz_dhs_purchase_amount" :key="level.dhs_rank_id" @click="onChoose(level)" :class="apply_dhs_rank_id == level.dhs_rank_id ? 'click':''">{{level.dz_dhs_rank_name}}</div>
        </template>
      </div>
    </van-popup>
    <no-data :noData='noData' v-if="purchaseList.length == 0 && finished"></no-data>
  </div>
</template>
<script>
import purchaseList from '../component/purchaseList'
import { scaleGoodsPrice } from '@/utils/index.js'
import { purchaseItemList, purchaseApply } from '@/api/dz/dzCcbd'
import noData from '@/components/noData/index'
import addressDialog from '@/components/addressDialog'

export default {
  components: {
    purchaseList,
    noData,
    addressDialog
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无商品',
        marginTop: '0px'
      },
      show: false,
      purchaseList: [], // 商品列表
      upgrade_level: [],
      item: {
        p: 1,
        type: 0 // 0:我的进货单 1：升级进货单
      },
      list: {},
      bondList: [], // 保证金商品
      isBond: false,
      loading: false,
      error: false,
      finished: false,
      totalPrice: 0, // 累积金额
      listData: {
        item_id: [],
        num: [],
        sku_id: [],
        address: {},
        type: 0
      },
      choose: true,
      dhs_level: '等级选择',
      amount: 0,
      apply_dhs_rank_id: '',
      noSubmit: false,
      // 地址管理
      address: null,
      addressVisible: false
    }
  },
  created() {
    if (this.$route.query.type == 1) {
      this.item.type = 1
      document.title = '升级进货单'
    } else {
      this.item.type = 0
      document.title = '我的进货单'
    }
    this.onLoad()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    onLoad() {
      purchaseItemList({
        ...this.item,
        apply_dhs_rank_id: this.apply_dhs_rank_id ? this.apply_dhs_rank_id : undefined }).then(res => {
        if (res.status == 1) {
          this.bondList = res.data.bond_item_list ? res.data.bond_item_list : []
          this.upgrade_level = res.data.upgrade_level
          if (res.data.list.length > 0) {
            const list = res.data.list
            for (const i in list) {
              if (list[i].sku_list.length > 0) {
                list[i].show = false
                for (const k in list[i].sku_list) {
                  list[i].sku_list[k].nums = 0
                }
              } else {
                list[i].nums = 0
              }
            }
            if (this.item.p > 1) {
              this.choose = false
            }
            this.purchaseList.push(...list)
            this.item.p++
          } else {
            this.finished = true
          }

        } else {
          this.finished = true
          this.error = true
          this.$Error(res.msg)
        }
      })
        .catch(() => {
          this.error = true
        })
    },
    changeNumList(data) {
      // console.log('data', data)
      this.list = data
    },
    changeTotal(data) {
      this.totalPrice = data
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price, 'large')
    },
    onSubmit() {
      this.$loadingWrap.show()
      this.listData.item_id = []
      this.listData.num = []
      this.listData.sku_id = []
      for (const i in this.list) {
        if (this.list[i].num > 0) {
          this.listData.item_id.push(this.list[i].item_id)
          this.listData.num.push(this.list[i].num)
          this.listData.sku_id.push(this.list[i].sku_id)
        }
      }
      if (this.listData.num.length == 0 && this.totalPrice == 0) {
        this.$loadingWrap.close()
        this.$Error('请添加进货商品')
      } else if (!this.address) {
        this.$loadingWrap.close()
        this.$Error('请选择收货地址')
      } else {
        this.listData.address = this.address.name + '<br>' + this.address.addr
        if (this.item.type == 1) {
          this.listData.type = 1
          if (this.apply_dhs_rank_id == '') {
            this.$loadingWrap.close()
            this.$Error('请选择升级等级')
          } else if (this.totalPrice < this.amount) {
            this.$loadingWrap.close()
            this.$Error('进货价格不够升级标准')
          } else if (this.bondList.length > 0 && !this.list[0].boundStatus) {
            this.$loadingWrap.close()
            this.$Error('请选择保证金商品')
          } else {
            this.listData.apply_dhs_rank_id = this.apply_dhs_rank_id
            purchaseApply(this.listData).then(res => {
              this.$loadingWrap.close()
              this.$Error(res.msg)
              if (res.status == 1) {
                setTimeout(() => {
                  this.$JumpName(this, 'myPurchaseOrder', { type: 3 })
                }, 1000)
              }
            })
          }
        } else {
          this.listData.type = 0
          purchaseApply(this.listData).then(res => {
            this.$loadingWrap.close()
            this.$Error(res.msg)
            if (res.status == 1) {
              setTimeout(() => {
                this.$JumpName(this, 'myPurchaseOrder', { type: 1 })
              }, 1000)
            }
          })
        }
      }
    },
    onChoose(data) {
      this.choose = true
      this.show = false
      this.dhs_level = data.dz_dhs_rank_name
      this.apply_dhs_rank_id = data.dhs_rank_id
      this.amount = data.dz_dhs_purchase_amount
      this.item.p = 1
      this.purchaseList = []
      document.documentElement.scrollTop = 0
      this.onLoad()
    },
    // 地址管理 start
    handleClickOpenAddress() {
      this.addressVisible = true
    },
    selectAddress(data) {
      // console.log(data)
      this.address = {
        addr: data.province + data.city + (data.area ? data.area : '') + (data.town ? data.town : '') + data.address,
        name: data.name + '&nbsp;&nbsp;' + data.mobile
      }
    }
    // 地址管理 ent
  }
}
</script>
<style lang="scss">
.total{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 98px;
  background: #fff;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  .cumulative-price{
    margin-right: 28px;
  }
  .submit{
    padding: 14px 60px;
    font-size: 28px;
    color: #fff;
    border-radius: 38px;
    background: linear-gradient(270deg, #E90104 0%, #FE1B49 100%, #FE1B49 100%);
    &.no-list{
      background: #ccc;
    }
  }
}
.dhs-level{
  background: #fff;
  padding: 24px;
  font-size: 28px;
  .amount{
    margin-top: 12px;
  }
  .choose-dhs{
    display: flex;
    align-items: center;
    .kailong{
      width:0;
      height:0;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
      border-top: 8px solid #000;
      margin-left: 10px;
    }
  }

}
.dhs-pop{
  background: #F7F7F7;
  div{
    text-align: center;
    padding: 22px 0;
    font-size: 32px;
    &.click{
      background: #fff;
      color: #108EE9;
      border-bottom: 1px solid #DDDDDD;
      border-top: 1px solid #DDDDDD;
    }
  }
}
.item-block{
  margin:24px 20px;
  padding:25px;
  background:#fff;
  border-radius:20px;
  font-size:26px;
  line-height:40px;
  overflow: hidden;
  &.address{
    display:flex;
    align-items: center;
    line-height:46px;
    background:#fff url(https://img.wifenxiao.com/h5-wfx/images/address_bar.png) center bottom/contain no-repeat;
    &.self_address{
      background: #fff;
      .left{
        width: 38px;
        height: 35px;
        background-image:url(https://img.wifenxiao.com/h5-wfx/images/order/adreess_log_self.png);
      }
    }
    .left{
      width:31px;
      height:38px;
      margin-right:24px;
      background-image:url(https://img.wifenxiao.com/h5-wfx/images/order/adreess_log.png);
      background-size:100% 100%;
      background-repeat: no-repeat;
    }
    .right{
      flex:1;
    }
    svg{
      font-weight: bold;
      font-size: 20px;
    }
    .name{
      color: #666;
    }
    .addr{
      font-size:32px;
      font-weight: bold;
      margin-bottom: 6px;
      // color:#999;
    }
  }
}
</style>